<template>
	<view class="container">
		<uni-card :is-shadow="true" is-full>
			<view class="uni-h6" style="text-indent: 2em;">
				一旦你能熟练地从不同类型的问题中提炼出基本原理，也就是“规则”，你就更有希望在陌生的情境中找到正确的答案。与集中练习相比，穿插练习与多样化练习可以让你更好地掌握这种提炼技能。</view>
		</uni-card>
		<uni-card padding="0" spacing="0" :is-full="true" :border="false">
			<template v-slot:title>
				<uni-list>
					<uni-list-item :show-switch="true" title="记录" @switchChange="switchNoteChange"
						:switchChecked="isInterNoteSwitch" />
				</uni-list>
			</template>
			<view slot="actions" class="card-actions example" v-if="isInterNoteSwitch">
				<!-- 基础用法，不包含校验规则 -->
				<uni-forms ref="baseForm" :model="note" labelWidth="90upx">
					<uni-forms-item label="分类:">
						<uni-data-picker v-model="note.classify" :localdata="noteClassifyList" popup-title="分类"
							:map="pickerMap" @change="noteClassifyChange">
						</uni-data-picker>
					</uni-forms-item>
					<uni-forms-item label="标题:">
						<uni-easyinput prefixIcon="fire-filled" v-model="note.title" placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item label="内容:" v-if="isShowContent">
						<uni-easyinput type="textarea" v-model="note.content" placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item label="网址:" v-if="note.classify===108">
						<uni-easyinput prefixIcon="link" v-model="note.content" placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item label="文件:" v-if="note.classify===107">
						<view @click="chooseMusicFile('file')">
							<uni-easyinput prefixIcon="link" v-model="note.content" disabled placeholder="请选择" />
						</view>
					</uni-forms-item>
					<view class="example-body" v-if="note.classify===110">
						<uni-file-picker limit="1" title="请选择一张图片" file-mediatype="image"
							@select="selectImage"></uni-file-picker>
					</view>
					<view class="example-body" v-if="note.classify===105">
						<qin-music-player v-if="showMusic" :m_title='currentMusicFile.name'
							:m_src='currentMusicFile.url' :a_play='true' :m_size="3.8"
							@m_down='chooseMusicFile("music")'></qin-music-player>
					</view>
					<view class="example-body" v-if="note.classify===111">
						<view class="page-body" v-if="showVideo">
							<view class="page-section">
								<iframe :onload="onloadCode"
									style="width:690upx;height:650upx;border:1px solid #fff;background: #000;"></iframe>
							</view>
						</view>
						<button style="background-color: aqua;" @click="chooseMusicFile('video')">选择视频</button>
					</view>
				</uni-forms>
			</view>
		</uni-card>
		<uni-card padding="0" spacing="0" :is-full="true" :border="false" v-if="isInterNoteSwitch">
			<template v-slot:title>
				<uni-list>
					<uni-list-item :show-switch="true" title="归档" @switchChange="switchCompilationChange"
						:switchChecked="isInterStepSwitch" />
				</uni-list>
			</template>
			<view slot="actions" class="card-actions example" v-if="isInterStepSwitch">
				<!-- 基础用法，不包含校验规则 -->
				<uni-forms ref="baseForm" :model="step" labelWidth="90upx">
					<uni-forms-item label="分类:">
						<uni-data-picker v-model="step.classifyId" :localdata="compilationClassifyList"
							popup-title="选择分类" :map=" {text: 'name',value: 'id'}"
							@change="changeCompilationClassify"></uni-data-picker>
					</uni-forms-item>
					<uni-forms-item label="集合:">
						<uni-data-picker v-model="step.compilationId" :localdata="compilationList" popup-title="选择集合"
							:map=" {text: 'name',value: 'key'}" @change="changeCompilation"></uni-data-picker>
					</uni-forms-item>
					<uni-forms-item label="段落:">
						<uni-data-picker v-model="step.chapterId" :localdata="compilationChapterList" popup-title="选择段落"
							:map=" {text: 'name',value: 'key'}" @change="changeChapter">
						</uni-data-picker>
					</uni-forms-item>
				</uni-forms>
			</view>
		</uni-card>
		<uni-card padding="0" spacing="0" :is-full="true" :border="false" v-if="isInterNoteSwitch">
			<template v-slot:title>
				<uni-list>
					<uni-list-item :show-switch="true" title="标签和备注" @switchChange="switchOtherChange"
						:switchChecked="isInterOtherSwitch" />
				</uni-list>
			</template>
			<view slot="actions" class="card-actions example" v-if="isInterOtherSwitch">
				<!-- 基础用法，不包含校验规则 -->
				<uni-forms ref="baseForm" :model="note" labelWidth="90upx">

					<uni-forms-item label="标签:">
						<uni-easyinput v-model="note.newLabel" placeholder="" />
					</uni-forms-item>
					<uni-forms-item label="备注:">
						<uni-easyinput v-model="note.remark" placeholder="" />
					</uni-forms-item>

				</uni-forms>
			</view>
		</uni-card>
		<button type="primary" @click="submit()">提交</button>
	</view>
</template>

<script>
	import {
		Base64
	} from 'js-base64';
	import changeFiles from "@/uni_modules/file-choose/components/file-choose/changeFile.js";
	import QinMusicPlayer from '@/components/Qin-Music-Player/Qin_Music_Player.vue'
	export default {
		components: {
			QinMusicPlayer
		},
		data() {
			return {
				fileList: [],
				showMusic: true,
				showVideo: true,
				//开关
				isInterStepSwitch: false,
				isInterNoteSwitch: false,
				isInterOtherSwitch: false,
				isShowContent: false,
				// 记录的类型数据字典
				noteClassifyList: [],
				compilationClassifyList: [],
				compilationList: [],
				compilationChapterList: [],
				compilationClassify: {},
				compilation: {},
				//选择的文件
				currentFile: {},
				currentMusicFile: {
					name: "未选择",
					url: ""
				},
				// 基础表单数据
				note: {
					classify: null,
					classifyStr: "",
					content: null,
					newLabel: null,
					remark: null,
					tag: null,
					title: ""
				},
				//合集步骤的信息
				step: {
					noteId: null,
					classifyId: null,
					compilationId: null,
					chapterId: null,
				},
				pickerMap: {
					text: 'dictLabel',
					value: 'dictCode'
				},
				onloadCode: '',
				videoSrc: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/wap2appvsnative.mp4',


			}
		},

		onLoad() {
			this.loadDicrData()
		},
		onReady() {
			// 设置自定义表单校验规则，必须在节点渲染完毕后执行
		},
		methods: {

			//视频错误
			videoErrorCallback: function(e) {
				console.log('视频错误信息:')
				console.log(e.target.errMsg)
			},
			changeFile(file, fileList) {
				this.showMusic = false
				this.fileList = fileList;

				for (let i = 0; i < file.length; i++) {
					this.currentMusicFile = file[0]
					console.log('此出调用文件上传接口！', file[i]);
				}

			},
			chooseMusicFile(type) {
				console.info(type)
				if ("music" === type) {
					this.showMusic = false
					console.log('选择音乐')
					changeFiles(res => {
						this.currentMusicFile = {
							name: res.substr(res.lastIndexOf("/") + 1),
							url: res
						}
						this.note.title = this.currentMusicFile.name
						this.showMusic = true
					});
				} else if ("video" === type) {
					console.log('选择视频')
					this.showVideo = false
					uni.chooseVideo({
						sourceType: ["camera", "album"],
						compressed:false,
						success: (res) => {
							this.currentMusicFile = {
								name: res.tempFilePath.substr(res.tempFilePath.lastIndexOf("/") + 1),
								url: res.tempFilePath
							}
							this.note.title = this.currentMusicFile.name
							this.onloadCode =
								`this.contentWindow.document.body.innerHTML = '<video style="width: 100%;height: 100%" controls="controls" src="${this.currentMusicFile.url}"></video>';`
							this.showVideo = true
							console.info(res)
						},
						complete: () => {
							this.showVideo = true
						}
					});
					return;

					// changeFiles(res => {
					// 	this.note.title = this.currentMusicFile.name
					// 	this.onloadCode =
					// 		`this.contentWindow.document.body.innerHTML = '<video style="width: 100%;height: 100%" controls="controls" src="${this.currentMusicFile.url}"></video>';`
					// 	this.showVideo = true
					// });
				} else if ("file" === type) {
					console.log('选择文件')
					changeFiles(res => {
						this.currentMusicFile = {
							name: res.substr(res.lastIndexOf("/") + 1),
							url: res
						}
						this.note.title = this.currentMusicFile.name
						this.note.content = this.currentMusicFile.url
					});
				} else {
					uni.showToast({
						title: "文件类型不匹配"
					})
				}
			},
			switchCompilationChange() {
				this.isInterStepSwitch = !this.isInterStepSwitch
			},
			switchOtherChange() {
				this.isInterOtherSwitch = !this.isInterOtherSwitch
			},
			switchNoteChange() {
				this.isInterNoteSwitch = !this.isInterNoteSwitch
				this.isInterStepSwitch = false
				this.isInterOtherSwitch = false
			},
			loadDicrData() {
				//加载记录字典类型
				this.$api.getSystemDictDataList({
					dictType: "zone_note_classify",
					pageSize: 999999
				}).then(res => {
					console.info(res)
					this.noteClassifyList = res.rows
				})
				this.$api.compilationClassifyAll().then(res => {
					console.info(res)
					this.compilationClassifyList = res.data
				})
			},


			submit(ref) {
				console.info("提交了", this.note)
				if (!this.isInterNoteSwitch) {
					uni.showToast({
						title: "请开始内容",
						position: "top",
						mask: true,
					})
				} else {
					//标题空判断
					if (this.note.title === null || this.note.title === '') {
						uni.showToast({
							title: "请输入标题内容",
							position: "top",
							mask: true,
						})
						return
					}
					//判断段落是否需要加入合集
					if (this.isInterStepSwitch) {
						if (this.step.compilationId === null || this.step.compilationId === '') {
							uni.showToast({
								title: "请选择合集",
								position: "top",
								mask: true,
							})
							return
						}
					}
					//文件上传
					//判断是什么类型
					switch (this.note.classify) {
						case 107:
						case 111:
						case 105:
							//判断文件是否已经选择
							if (Object.keys(this.currentMusicFile).length == 0) {
								uni.showToast({
									title: "请选择文件",
									position: "top",
									mask: true,
								})
								return;
							}
							this.$api.uploadFile(this.currentMusicFile).then(res => {
								console.info("文件上传", res)
								this.note.content = res.data.url
								this.addNote();
							})
							break
						case 110:
							//判断文件是否已经选择
							if (Object.keys(this.currentFile).length == 0) {
								uni.showToast({
									title: "请选择文件",
									position: "top",
									mask: true,
								})
								return;
							}
							let uploadRes = this.$api.uploadFiles(this.currentFile).then(res => {
								console.info(res)
								this.note.content = res.data.url
								this.addNote();
							})
							break
						default:
							this.addNote();
					}

				}
			},
			addNote() {
				//base64的加密
				if (!(this.note.content === null || this.note.content === '')) {
					this.note.content = Base64.encode(this.note.content)
				}
				//添加记录
				this.$api.addNote(this.note).then(res => {
					this.step.noteId = res.data.id
					//开始添加合集记录
					if (this.isInterStepSwitch) {
						this.$api.addStep(this.step).then(res => {
							this.backOrOnce();
						});
					} else {
						this.backOrOnce();
					}

				})
			},
			backOrOnce() {
				let _this = this
				uni.showModal({
					content: "记录成功，还继续吗~O(∩_∩)O~",
					cancelText: "返回",
					confirmText: "继续记录",
					success: function(e) {
						if (e.confirm) {
							//清空数据重来
							_this.resetData();
						}
						if (e.cancel) {
							//返回上一个
							uni.navigateBack()
						}
					},
				})
				//
			},
			//重置数据
			resetData() {
				//开关
				// this.isInterStepSwitch = false
				// this.isInterNoteSwitch = false
				// this.isInterOtherSwitch = false
				this.isShowContent = false
				// 记录的类型数据字典
				this.compilationList = []
				this.compilationChapterList = []
				this.compilationClassify = {}
				this.compilation = {}
				// 基础表单数据
				this.note = {
					classify: null,
					classifyStr: "",
					content: null,
					newLabel: null,
					remark: null,
					tag: null,
					title: ""
				}
				//合集步骤的信息
				this.step = {
					noteId: null,
					classifyId: null,
					compilationId: null,
					chapterId: null,
				}
			},
			changeChapter(e) {
				console.info(e)
				if (e.detail.value.length === 0) {
					this.step.chapterId = null
				} else {
					this.step.chapterId = e.detail.value[0].value
				}
			},
			//改变合集
			changeCompilation(e) {
				if (e.detail.value.length === 0) {
					this.step.chapterId = null
					this.step.compilationId = null
					this.compilationChapterList = []
					this.compilation = null
				} else {
					this.compilationList.forEach(compilation => {
						if (e.detail.value[0].value === compilation.key) {
							this.compilationChapterList = compilation.subs
							this.compilation = compilation
						}
					})
				}
			},
			//改变了合集分类
			changeCompilationClassify(e) {
				if (e.detail.value.length === 0) {
					this.step = {
						noteId: null,
						classifyId: null,
						compilationId: null,
						chapterId: null,
					}
					this.compilationChapterList = []
					this.compilation = null
					this.compilationList = []
					this.compilationClassify = null

				} else {
					this.compilationClassifyList.forEach(compilationClassify => {
						if (e.detail.value[0].value === compilationClassify.id) {
							this.compilationList = compilationClassify.foods
							this.compilationClassify = compilationClassify
						}
					})
				}
			},
			//改变记录的类型
			noteClassifyChange(e) {
				console.info(e)
				//写入txt
				if (e.detail.value.length === 0) {
					this.note.classifyStr = null
					this.note.classify = null
				} else {
					this.note.classifyStr = e.detail.value[0].text
					//判断是什么类型
					switch (this.note.classify) {
						case 100:
						case 105:
						case 107:
						case 108:
						case 110:
						case 111:
							this.isShowContent = false
							break
						default:
							this.isShowContent = true
					}
				}
			},
			selectImage(e) {
				this.currentFile = e
				let tempFile = e.tempFiles[0]
				this.note.title = tempFile.name
			}
		}
	}
</script>

<style lang="scss">
	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		line-height: 35px;
		margin-left: 10px;
	}
</style>